import {List, Row, Col, Button, Icon, Divider} from "antd";
import React, {Component} from 'react';
import 'antd/dist/antd.css';

const listData = [];
for (let i = 0; i < 23; i++) {
    listData.push({
        name: `内容`,
        status: '进度2',
        time: '2018-8-8',
        type: '事件类型1',
    });
}

const IconText = ({type, text}) => (
    <span>
    <Icon type={type} style={{marginRight: 8}}/>
        {text}
  </span>
);

export default class FileList extends Component {
    state = {
        loading: true,
        loadingMore: false,
        showLoadingMore: true,
        data: [],
    };

    handleRelativeClick = (item) => {

    };

    /*componentDidMount() {
        this.getData((res) => {
            this.setState({
                loading: false,
                data: res.results,
            });
        });
    }

    getData = (callback) => {
        fetch({
            url: fakeDataUrl,
            type: 'json',
            method: 'get',
            contentType: 'application/json',
            success: (res) => {
                callback(res);
            },
        });
    }

    onLoadMore = () => {
        this.setState({
            loadingMore: true,
        });
        this.getData((res) => {
            const data = this.state.data.concat(res.results);
            this.setState({
                data,
                loadingMore: false,
            }, () => {
                // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
                // In real scene, you can using public method of react-virtualized:
                // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
                window.dispatchEvent(new Event('resize'));
            });
        });
    };*/

    render() {
        let title = (
            <Row type="flex" align="center" style={{marginTop: 16}}>
                <Col span={5}>
                    <h4>项目名</h4>
                </Col>
                <Col span={5}>
                    <h4>时间</h4>
                </Col>
                <Col span={5}>
                    <h4>状态</h4>
                </Col>
                <Col span={4}>
                    <h4>类型</h4>
                </Col>
                <Col span={5}>
                    <h4>操作</h4>
                </Col>
            </Row>
        );

        let divider = (
            <Divider style={{height: 1}}/>
        );

        return (
            <h2 style={{margin:"16px 32px"}}>
                项目进度

                {title}
                {divider}

                <List
                    itemLayout="vertical"
                    size="small"
                    pagination={{
                        onChange: (page) => {
                            console.log(page);
                        },
                        pageSize: 3,
                    }}
                    dataSource={listData}
                    renderItem={(item) => (
                        <Row type="flex" align="center">
                            <Col span={5}>
                                <div>{item.name}</div>
                            </Col>
                            <Col span={5}>
                                <div>{item.time}</div>
                            </Col>
                            <Col span={5}>
                                <div>{item.status}</div>
                            </Col>
                            <Col span={4}>
                                <div>{item.type}</div>
                            </Col>
                            <Col span={5}>
                                <Button type="danger" onClick={this.handleRelativeClick}>删除</Button>
                                <Button type="primary" style={{marginLeft: 8}} onClick={this.handleRelativeClick}>管理</Button>
                            </Col>
                            {divider}
                        </Row>
                    )}
                />
            </h2>);
    }

}
